<template>
  <div class="rightbox" v-cloak>
    <h1>公司中心 > 方案详情
      <el-button style="float:right;margin:10px 20px 0 0;" type="primary" size="mini" @click="Downbtn()">审核</el-button>
    </h1>
    <div class="wrap-case-detail">
      <div class="detail-head">
        <div class="detail-head-left">
          <img :src="data.layoutmap">
        </div>
        <div class="detail-head-right">
          <h2>{{data.title}}</h2>
          <p>所属公司：{{data.companyName}}</p>
          <p>设计师：{{data.designerName}}</p>
          <p>户型：{{data.doorparam}}</p>
          <p>面积：{{data.fixareaparam}}</p>
          <p>造价：{{data.fixmoneyparam}}</p>
        </div>
      </div>
      <div class="detail-box">
        <div>
          <el-button v-if="title.mapinfo.length !== 0" v-for="(title, index) in contentList" :key="index" size="medium" @click="getImg(title)">{{title.position}}</el-button>
        </div>
        <div class="detail-box-pub">
          <img :src="item.value" v-for="(item, index) in imgList.mapinfo" :key="index">
        </div>
      </div>
    </div>
    <el-dialog title="审核" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="审批" label-width="120">
          <el-radio v-model="form.state" label="1">通过</el-radio>
          <el-radio v-model="form.state" label="-1">不通过</el-radio>
        </el-form-item>
        <el-form-item v-if="form.state == '-1'" label="不通过原因" label-width="120">
          <el-input v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="notDown">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
// import qs from 'qs'
export default {
  data () {
    return {
      contentList: [],
      imgList: [],
      data: [],
      schemeindex: '',
      dialogFormVisible: false,
      form: {
        state: '1',
        reason: '',
        schemeindex: ''
      }
    }
  },
  methods: {
    getList: function () {
      var that = this
      if (that.$route.params.schemeindex) {
        that.data = JSON.parse(that.$route.params.schemeindex)
        that.schemeindex = that.data.schemeindex
        that.data.layoutmap = that.data.layoutmap[0].value
        that.$axios.request('post', '/Scheme/Info', {
          Schemeindex: that.schemeindex
        })
          .then((res) => {
            if (res.code === 0) {
              that.contentList = res.data
              that.imgList = res.data[0]
            }
          })
      } else {
        that.$router.push({ name: 'caseAudit' })
      }
    },
    getImg: function (title) {
      var that = this
      for (var i = 0; i < that.contentList.length; i++) {
        if (that.contentList[i].position === title.position) {
          that.imgList = that.contentList[i]
        }
      }
    },
    Downbtn: function () {
      var that = this
      that.form.schemeindex = that.schemeindex
      that.dialogFormVisible = true
    },
    notDown: function () {
      var that = this
      if (that.form.state === '-1') {
        if (that.form.reason === '') {
          that.$pub.messageTwo('理由不能为空', '提示')
          return false
        }
      }
      that.$axios.request('post', '/Scheme/Examine', {
        schemeindex: that.form.schemeindex,
        state: that.form.state,
        remarks: that.form.reason
      })
        .then((res) => {
          if (res.code === 0) {
            that.dialogFormVisible = false
            that.$axios.alert('操作成功', '提示', function () {
              that.$router.push({ name: 'caseAudit' })
            })
          }
        })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style>
.wrap-case-detail{
  width: 1000px;
  margin: 0 auto;
}
.detail-nav-title{
  padding: 15px 0;
  border-bottom: #eee solid 1px;
}
.detail-nav-title a{
  font-size: 14px;
  color: #646464;
}
.detail-head{
  width: 1000px;
  margin: 0 auto;
  padding: 25px 0;
  border-bottom: #dbdbdb solid 1px;
  overflow: hidden;
}
.detail-head-left{
  float: left;
}
.detail-head-left>img{
  width: 240px;
}
.detail-headdesign-left{
  float: left;
}
.detail-headdesign-left>img{
  width: 120px;
}
.detail-head-right{
  width: 70%;
  float: left;
  margin-left: 34px;
}
.detail-head-right h2{
  margin-top: 14px;
  font-size: 18px;
  color: #323232;
  font-weight: bold;
}
.detail-head-right p{
  margin-top: 12px;
  font-size: 14px;
  color: #646464;
}
.detail-box{
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 40px;
}
.detail-box-pub{
  width: 100%;
}
.detail-box-pub h1{
  font-size: 18px;
  color: #323232;
  font-weight: bold;
  text-align: center;
}
.detail-box-pub img{
  width: 100%;
  margin-top: 10px;
}
</style>
